$white: #FFFFFF;

.hero {
  background: $envoy-blue;
  background: linear-gradient(to bottom,  $envoy-blue 0%, $envoy-black-blue 100%);
  height: 572px;
  margin-bottom: 1em;
  text-align: center;

  @include media($medium-screen-up) {
    height: 660px;
 }
}

.hero-headline {
  color: $white;
  font-size: $base-font-size * 2.2;
  font-weight: 600;
  margin: 1.2em 0 0.5em;
}

.hero-description {
  color: darken($white, 20%);
  display: inline-block;
  font-size: $base-font-size;
  line-height: 1.4;
  margin: 0 0 2.5em;
  width: 100%;

  @include media($medium-screen-up) {
    font-size: $base-font-size * 1.35;
    width: 75%;
  }
}

.hero-banner-container {
  .envoy-logo {
    background: image_url("envoy_logo.svg");
    background-size: 330px;
    background-repeat: no-repeat;
    background-position: 50%;
    height: 13em;
    margin: 0 auto;
    width: 100%;

    @include media($medium-screen-up) {
      background-size: 500px;
      height: 20em;
      width: 100%;
    }
  }
}
